<template>
	<view>
		<view class="cu-custom" :style="[{height:setting.CustomBar + 'px'}]">
			<view class="cu-bar fixed" :style="headerStyle"
				:class="[bgImage!=''?'none-bg text-white bg-img':'',bgColor]">
				<view class="action flex">
					<view class="search-form round">
						<text class="cuIcon-search"></text>
						<input v-model="inputValue" @input="handleInput" @focus="InputFocus" @blur="InputBlur" :adjust-position="false" type="text"
							:placeholder="props.content" confirm-type="search" />
					</view>
				</view>
				<view class="text-size-32" :style="[{top:setting.StatusBar + 'px'}]">
					<slot name="content"></slot>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import {
		useSettingStore
	} from '@/stores/index';
	import {
		computed,
		ref,
		watch
	} from "vue";
	import {
		onShow
	} from '@dcloudio/uni-app';
	import {
		accountInfo
	} from '@/common/api/user';
	const setting = useSettingStore();
	const emit = defineEmits(['action']);
	const props = defineProps({
		bgColor: {
			type: String,
			default: ''
		},
		bgImage: {
			type: String,
			default: ''
		},
		content: {
			type: String,
			default: '搜索文章、关键词'
		},
		icon: {
			type: String,
			default: 'cuIcon-loading2'
		},
		value: {
			type: String,
			default: 0
		}
	})
	const headerStyle = computed(() => {
		var StatusBar = setting.StatusBar;
		var CustomBar = setting.CustomBar;
		var bgImage = props.bgImage;
		var style = `height:${CustomBar}px;padding-top:${StatusBar}px;`;
		if (props.bgImage) {
			style = `${style}background-image:url(${bgImage});`;
		}
		return style;
	})
	const inputValue = ref('')
	watch(() => props.value, (newValue, oldValue) => {
		inputValue.value = newValue
	});
	const InputBottom = ref(0)
	const handleInput = (e: any) => {
		emit('action', inputValue.value);
	};
	const InputFocus = (e: any) => {
		InputBottom.value = e.detail.height
	}
	const InputBlur = (e: any) => {
		InputBottom.value = 0
	}
	//请求用户数据
	const onUserInfo = () => {
		accountInfo({}).then((res: any) => {
			if (res.code == 1000) {
				setting.userType = res.data.type;
				setting.userInfo = res.data;
			} else {
				setting.logout();
			}
		});
	};
	onShow(() => {
		onUserInfo();
	});
</script>

<style scoped>
	.cu-bar .action:first-child {
		margin-left: 0rpx;
		width: 100%;
	}
	.cu-bar .search-form {
	    margin: 0 20rpx;
	}
</style>
